<template>
  <div>
      <v-card hover>
          <div id="XSDFXPage" class="XSDFXPage"></div>
      </v-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      map: '',
      points: [
        {"lng":116.418261,"lat":39.921984,"price":50}
      ]
    }
  },
  mounted () {
    this.map = new BMap.Map('XSDFXPage')
    this.map.centerAndZoom(new BMap.Point(121.48789948569473, 31.24916171001514), 11);
    this.map.enableScrollWheelZoom()
    let tvm = this
    this.axios.post('/api/getallprice',{page:1})
    .then(function (response) {
      var points = response.data
      let gradient = {
        .2:'rgb(0, 255, 255)',
        .4:'rgb(0, 200, 255)',
        .3:'rgb(0, 140, 255)',
        .5:'rgb(0, 110, 255)',
        .6:'rgb(0, 50, 255)',
        .7:'rgb(50, 0, 255)',
        .8:'rgb(100, 0, 255)'
      }
      var heatmapOverlay = new BMapLib.HeatmapOverlay({"radius":20});
      tvm.map.addOverlay(heatmapOverlay);
      heatmapOverlay.setDataSet({data:points,max:100,gradient:gradient});
      heatmapOverlay.show()
      tvm.axios.post('/api/getallprice',{page:2})
      .then(function (response) {
        heatmapOverlay.setDataSet({data: points.concat(response.data),max:100,gradient:gradient});
      })
    })
    .catch(function (err) {
      console.log(err)
    })
    
  }
}
</script>
<style scoped>
.XSDFXPage{
  width:  100%;
  height:  800px;
  overflow:  hidden;
  margin:  0;
  font-family:  "微软雅黑";
}
</style>
